import React, { Component, createRef } from 'react';
import { Form, Input, Button, message } from 'antd';
import { UserOutlined, LockOutlined, KeyOutlined } from '@ant-design/icons';
import Captcha from "../../components/Captcha"
// 导入请求资源
import url from "../../config/url"
import req from "../../http/req"
import { withRouter } from "react-router-dom"
class Passwdlogin extends Component {
  constructor(props){
    super(props)
    this.capRef = createRef()
  }
  state = {}
  render() {
    return (
      <Form
        name="normal_login"
        className="login-form"
        initialValues={{
          remember: true,
        }}
        onFinish={this.onFinish}
      >
        <Form.Item
          name="username"
          rules={[
            {
              required: true,
              message: '请输入用户名',
            },
          ]}
        >
          <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="用户名" />
        </Form.Item>
        <Form.Item
          name="password"
          rules={[
            {
              required: true,
              message: '请输入密码!',
            },
          ]}
        >
          <Input
            prefix={<LockOutlined className="site-form-item-icon" />}
            type="password"
            placeholder="密码"
          />
        </Form.Item>
        <Form.Item
          name="captcha"
          rules={[
            {
              required: true,
              message: '请输入验证码!',
            },
          ]}
        >
          <div>
            <Input
              prefix={<KeyOutlined className="site-form-item-icon" />}
              type="captcha"
              placeholder="请输入验证码" style={{width: "70%", marginRight: "7px"}}/>
              <Captcha h={32} w={96} setKey={this.getKey} ref={this.capRef}/>
          </div>
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit" className="login-form-button" block>
            登录
          </Button>
        </Form.Item>
      </Form>
    );
  }
  // 表单提交处理程序
  onFinish = (values) => {
    // 将state中key值补录到values(这里是表单里提交的信息)中
    values.key = this.state.key
    // 发送请求，成功--后端返回的jwt存着,提示，跳转；
    req.post(url.PasswdLogin, values).then((res) => {
      if (res.data.errNo === 0) {
        message.success("登陆成功！", 2, () => {
          this.props.history.push("/dashboard")
        })
      } else {
        message.error(res.data.errText, 2, () => {
          this.capRef.current.loadCaptcha()
        })
      }
    })
    // 失败，提示错误，注意验证码要变
  };
  // 获取验证码key值的方法
  getKey = (key) => {
    this.setState({
      key
    })
  }
}

export default withRouter(Passwdlogin);
